<template>
  <div>
      <div class="selectBtn">
        <div style="width: 400px;">
        <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
            <el-select style="width: 120px;" v-model="selects" slot="prepend" placeholder="请选择">
            <el-option label="餐厅名" value="1"></el-option>
            <el-option label="订单号" value="2"></el-option>
            <el-option label="用户电话" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        </div>
        <div>
            <el-button type="primary">新建党组织</el-button>
        </div>
      </div>
      <div style="margin-top: 24px;">
        <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" :data="tableData"  max-height="450" style="width: 100%">
        <el-table-column prop="Organizers" label="党组织名称" ></el-table-column>
        <el-table-column prop="InstitutionalType" label="党组织书记" ></el-table-column>
        <el-table-column prop="Principal" label="党组织形式" ></el-table-column>
        <el-table-column prop="licence" label="党员数" ></el-table-column>
        <el-table-column label="操作" >
            <el-button type="text">编辑</el-button>
            <el-button style="margin-left: 7px;" type="text">删除</el-button>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row
            type="flex"
            align="middle"
            justify="center"
            style="margin-top: 20px"
        >
            <el-col :span="5">
            <el-pagination
                background
                layout="total, prev, pager, next, sizes"
                :total="page.total"
                :page-sizes="[7, 10, 20, 50, 100]"
                :page-size="page.pageSize"
                @current-change="changePage"
                @size-change="handleSizeChange"
                :current-page.sync="page.currentPage"
            ></el-pagination>
            </el-col>
        </el-row>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selects: '',
      input3: '',
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      tableData: [
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Institutional: '王小虎', // 1
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈', // 4
          Principal: '150' // 5
        },
        {
          licence: '2016-05-02',
          Licenceissued: '2016-05-02',
          Institutional: '王小虎',
          InstitutionalType: '上海市普陀区',
          Organizers: '厉害陈',
          Principal: '150'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
    .el-button+.el-button {
        margin: 0;
    }
    .selectBtn {
        display: flex;
        margin-top: 15px;
        margin-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
</style>
